<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>访问对象属性的两种方式</title>
</head>
<body>
    <h2>访问对象属性的两种方式</h2>
    <ol>
        <li>使用: 对象名.属性名访问。常见的访问方式</li>
        <li>
            <p>使用: 对象名[属性名字符串]访问。类似于数组的访问方式</p>
            <ul>
                <li>使用场景1: 对象的属性名有非法字符时</li>
                <li>使用场景2: 需要通过属性名去遍历访问对象时</li>
            </ul>
        </li>
    </ol>

</body>
<script>
    let fengxian = {
        name: "奉先",
        sex: "男",
        // - 不能用于变量名，使用字符串的方式定义属性名
        "girl-friend": "艳艳",
    }

    console.log("fengxian.name = ",fengxian.name);
    // 第二种方式
    console.log("fengxian.sex = ",fengxian["sex"]);

    let key1 = "age";
    // 第二种方式，可以使用变量把属性名存储起来，通过变量来访问对象的属性
    fengxian[key1] = 36;
    console.log(fengxian)

    console.log("fengxian.girl-friend = ",fengxian['girl-friend']);

    // 得到对象的所有属性名数组
    let keys = Object.keys(fengxian);
    // 利用该数组可以遍历访问对象的所有属性
    console.log("keys = ",keys);
    for (let key of keys) {
        console.log(key," = ",fengxian[key]);
    }
</script>
</html>